<template>
  <div class="map_content">
    <div class="drag-region" data-tauri-drag-region></div>
    <div class="pick-map map" :style="{
      backgroundImage: mapSelect.pickMap ? `url(${mapSelect.pickMap})` : 'none'
    }">
      <p>{{ mapName.pickMap }}</p>
    </div>
    <div class="ban-map map" :style="{
      backgroundImage: mapSelect.banMap ? `url(${mapSelect.banMap})` : 'none'
    }">
      <p>{{ mapName.banMap }}</p>
    </div>

  </div>
</template>

<script setup lang='ts' name="MapIndex">
import BoardChannel from '@/utils/boardChannel';
import storeHelper from '@/utils/TauriStore';
const channel = new BoardChannel('bp-system');
interface MapSelect {
  banMap: string | null,
  pickMap: string | null
}
const mapSelect: MapSelect = reactive({
  banMap: null,
  pickMap: null
});
const mapName: MapSelect = reactive({
  banMap: null,
  pickMap: null
})
channel.on('mapSelect', (data: MapSelect) => {
  if (data.banMap) {
    mapName.banMap = data.banMap;
    import(`@/assets/images/map/${data.banMap}.png`).then((res) => {
      mapSelect.banMap = res.default;
    })
  };
  if (data.pickMap) {
    mapName.pickMap = data.pickMap;
    import(`@/assets/images/map/${data.pickMap}.png`).then((res) => {
      mapSelect.pickMap = res.default;
    })
  }
});
onMounted(()=>{
  _init();
})
const _init = async () => {
  try {
    const data = await storeHelper.get('mapSelect');
    if (data.banMap) {
      mapName.banMap = data.banMap;
      import(`@/assets/images/map/${data.banMap}.png`).then((res) => {
        mapSelect.banMap = res.default;
      })
    };
    if (data.pickMap) {
      mapName.pickMap = data.pickMap;
      import(`@/assets/images/map/${data.pickMap}.png`).then((res) => {
        mapSelect.pickMap = res.default;
      })
    }
  } catch (error) {
    console.log(error + '获取地图失败！');
  }
}
</script>
<style scoped lang='scss'>
.map_content {
  width: 100vw;
  height: 100vh;
  background: url('../../assets/images/mapBp.png');
  background-size: cover;
  position: relative;
  cursor: move;

  .drag-region {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; // 与header高度一致
    z-index: 9999;
    /* 兼容性写法 */
  }

  .map {
    width: calc(100% - 20px);
    height: 162px;
    background-size: cover;
    position: absolute;
    display: flex;
    align-items: flex-end;

    p {
      color: #fff;
      font-size: 24px;
      font-weight: 700;
      margin-left: 0.5em;
      margin-bottom: 0.5em;
    }

    &.pick-map {
      top: 61px;
      left: 10px;
    }

    &.ban-map {
      bottom: 47px;
      left: 10px;
      filter: grayscale(100%)
    }
  }
}
</style>